<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script>
            let data = { name: "张三", age: 18 };
            let vm = {};
            Object.defineProperty(vm, "name", {
                enumerable: true,
                writable: true,
                configurable: true,
                value: "张三",
                // get() {
                //     return data.name;
                // },
                // set(value) {
                //     data.name = value;
                // },
            });
            console.log(1, vm.name);
            vm.name = "李四";
            console.log(2, vm.name);

            Object.defineProperty(vm, "name", {
                enumerable: true,
                writable: false,
                configurable: false,
            });
            vm.name = "张三";
            console.log(3, vm.name);
            // 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
            // Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
            // Vue中数据代理的好处：更加方便的操作data中的数据
            // 基本原理：
            // 通过Object.defineProperty()把data对象中的所有属性添加到vm上
        </script>
    </body>
</html>
